<div>
    <x-mini-header>
        <x-slot name="url">{{ route('categories.index') }}</x-slot>
        <x-slot name="title">演员介绍</x-slot>
    </x-mini-header>

    <div class="p-4 flex items-center">
        <img class="flex-none mr-4 w-24 h-24 object-cover object-center rounded-full" src="{{ file_url($actor->picture) }}" alt="{{ $actor->title }}">

        <div>
            <h1 class="mb-4">{{ $actor->title }}</h1>
            <p>字母：{{ Str::of($actor->abbr)->upper() }}</p>
        </div>

        <div class="flex-none ml-auto w-20">
            <button type="button" class="rounded-full w-full text-red-500 border border-red-500 p-2 text-xs w-full">
                收藏
            </button>
        </div>
    </div>

    <p class="bg-neutral-100 h-2"></p>

    <h3 class="text-lg px-2 mt-2">所有作品({{ $total }})</h3>
    <div class="grid grid-cols-2 gap-2 px-2 my-2">
        @foreach($collection as $v)
            <x-video-item :video="$v" :key="$v->id"/>
        @endforeach
    </div>

    @includeWhen($hasMorePages, 'partials.load-more')
</div>
